function initSetting() {
    // 添加样式
    const style = document.createElement('style');
    style.innerHTML = `
    /* styles.css */    
    .modal {
        display: none; 
        position: fixed; 
        z-index: 1000; /* 确保对话框在其他内容之上 */
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
        background-color: rgba(0,0,0,0.4); 
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }
    
    .modal-content {
        position: relative;
        background-color: #fefefe;
        padding: 20px;
        border-radius: 8px;
        max-width: 500px; /* 最大宽度，以防内容过多 */
        min-height:160px;
        width: 90%; /* 宽度占父容器的90%，但会被 flex 布局覆盖为居中所需的宽度 */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 阴影效果 */
    }
    
    .modal-close {
        position: absolute; /* 绝对定位 */
        top: 10px; /* 距离内容顶部10px */
        right: 10px; /* 距离内容右侧10px */
        background-color: red; /* 红色背景 */
        color: white; /* 白色字体 */
        font-weight: bold; /* 字体加粗 */
        cursor: pointer; /* 鼠标悬停时显示为手型 */
        border: none; /* 无边框 */
        padding: 5px 10px; /* 内边距，使按钮看起来更大 */
        border-radius: 50%; 
    }
    
    .modal-close:hover,
    .modal-close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
    /* 新增的悬浮按钮样式 */
    .floating-button {
        position: fixed; /* 固定位置 */
        bottom: 120px; /* 距离页面底部20px */
        right: 120px; /* 距离页面右侧20px */
        width: 60px; /* 宽度60px */
        height: 60px; /* 高度60px */
        border-radius: 50%; /* 圆形 */
        background-color: red; /* 红色背景 */
        color: white; /* 白色字体 */
        display: flex; /* 使用flex布局使文本居中 */
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        font-size: 16px; /* 字体大小 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
        cursor: pointer; /* 鼠标悬停时显示为手型 */
        z-index: 1000; /* 确保它位于其他元素之上 */
        font-weight: bold; /* 字体加粗 */
        transition: box-shadow 0.3s ease; /* 添加过渡效果，使阴影变化更平滑 */
    }
    /* 鼠标经过时的悬浮按钮样式 */
    .floating-button:hover {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 更大的阴影效果 */
    }
    `
    document.head.appendChild(style);

    //添加模态框
    const modal = document.createElement('div');
    modal.id = "settingsModal";
    modal.className = "modal";
    modal.innerHTML = `   
        <div class="modal-content">
            <span id="closeSettings" class="modal-close">&times;</span>
            <!--设置内容-->
            <h2>设置</h2>
            <p>静音🔇:</p>
            <label><input type="checkbox" id="mute" name="hobbies" value="mute">静音</label><br>
            <p>背景颜色:</p>
            <input type="color" id="bgColorPicker" value="#ffffff">
            <!--设置内容 结束-->
            <button id="saveSettings">保存设置</button>
        </div>
`
    document.body.appendChild(modal);


    //打开设置按钮
    const openSettings = document.createElement('div');
    openSettings.textContent = "设置";
    openSettings.className = 'floating-button';
    openSettings.onclick = () => {
        modal.style.display = 'flex';
    };
    document.body.appendChild(openSettings);


    //关闭按钮事件
    let closeSettings = document.getElementById("closeSettings");
    closeSettings.onclick = () => {
        modal.style.display = 'none';
    };

    //设置按钮点击事件
    let saveSettings = document.getElementById("saveSettings");
    saveSettings.onclick = () => {
        //中间添加保存操作
        alert("保存");
        modal.style.display = "none";
    };
}
